<template>
  <view class="base-popup">
    <view v-if="wholeMask ? show : true" class="mask" :class="{ active: (mask && show) }" :style="{'top': wholeMask ? '-100vh' : 0, 'z-index': (mask && show) ? maskIndex: -1 }" @click="maskClick" @touchmove.prevent @touchmove.stop="()=>{}"></view>
    <view v-if="hasScroll">
      <view v-if="type === 'bottom'" class="popup-content" :class="{ active: show, top: allScreen}" :style="popStyle">
        <image v-if="showClose" class="close-btn" src="/static/images/icon/icon_close.png" mode="aspectFit" @click="close" />
        <slot></slot>
      </view>
      <view v-if="type === 'center'" class="popup-center" :class="{ active: show }" :style="'position: '+positionType">
        <slot></slot>
        <image v-if="showClose" class="close-btn" src="/static/images/icon/icon_close.png" mode="aspectFit" @click="close" />
      </view>
      <view v-if="type === 'top'" class="popup-top" :class="{ active: show }">
        <slot></slot>
        <image v-if="showClose" class="close-btn" src="/static/images/icon/icon_close.png" mode="aspectFit" @click="close" />
      </view>
    </view>
    <view v-else @touchmove.stop="()=>{}">
      <view v-if="type === 'bottom'" class="popup-content" :class="{ active: show, top: allScreen}" :style="popStyle">
        <image v-if="showClose" class="close-btn" src="/static/images/icon/icon_close.png" mode="aspectFit" @click="close" />
        <slot></slot>
      </view>
      <view v-if="type === 'center'" class="popup-center" :class="{ active: show }">
        <slot></slot>
        <image v-if="showClose" class="close-btn" src="/static/images/icon/icon_close.png" mode="aspectFit" @click="close" />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'BasePopup',
  props: {
    mask: {
      type: Boolean,
      default: true // 是否显示遮罩层
    },
    type: {
      type: String,
      default: 'bottom' // 显示位置
    },
    popStyle: {
      type: String,
      default: '' // 弹窗样式
    },
    wholeMask: {
      type: Boolean,
      default: false // 点击遮罩层是否关闭弹窗
    },
    maskClose: {
      type: Boolean,
      default: true // 点击遮罩层是否关闭弹窗
    },
    maskIndex: {
      type: Number,
      default: 99 // 点击遮罩层是否关闭弹窗
    },
    showClose: {
      type: Boolean,
      default: true // 是否显示关闭按钮
    },
    show: {
      type: Boolean,
      default: false // 弹窗是否显示
    },
    allScreen: {
      type: Boolean,
      default: false
    },
    hasScroll: {
      type: Boolean,
      default: false
    },
    positionType: {
      type: String,
      default: 'absolute'
    }
  },
  watch: {
    show(newVal) {
      this.$store.commit('setShowPopup', newVal)
    }
  },
  methods: {
    maskClick() {
      if (this.maskClose) {
        this.close()
      }
    },
    close() {
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss">
.base-popup{
  max-height: 92%;

  .mask{
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: -1;
    opacity: 0;
    transition: z-index opacity 0.2s linear;

    &.active{
      opacity: 1;
      z-index: 99;
    }
  }
  .popup-content{
    border-radius: 14rpx 14rpx 0px 0px;
    background-color: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    z-index: 999;
    transition: transform 0.2s linear;
    transform: translateY(120%);
    padding-bottom: calc(constant(safe-area-inset-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom));
    .close-btn{
      width: 26rpx;
      height: 26rpx;
      margin-top: 20rpx;
      right: 20rpx;
      padding: 20rpx;
      position: absolute;
      z-index: 1000;
    }
    &.top {
      top: 0;
    }
    &.active {
      transform: translateY(0);
    }
  }
  .popup-center{
    left: 50%;
    top: 50%;
    position: fixed;
    z-index: 999;
    transform: translateX(-50%) translateY(-50%);
    .close-btn{
      width: 60rpx;
      height: 60rpx;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%) translateY(200%);
      position: absolute;
      z-index: 1000;
    }
  }
  .popup-top{
    left: 0;
    top: -4rpx; // 兼容一些机型间隙问题
    position: fixed;
    z-index: 999;
    transition: transform 0.2s linear;
    transform:translateY(-150%);
    &.active {
      transform: translateY(0);
    }
  }
}

</style>
